<template>
	<div class="main">
        <!-- 1. 顶部导航模块 -->
		<div class="nav_top">
            <!-- 1-1.动图  -->
			<div class="hnuSlogan"><img src="@/assets/hnu_slogan.gif" /></div>
            <!-- 1-2.上部导航 -->
			<!-- mode="horizontal"表示横向导航 -->
			<div class="nav">
				<el-menu :default-active="$route.path" router class="el-menu-demo" mode="horizontal">
					<el-menu-item index="/home">首页</el-menu-item>
					<el-menu-item index="/office">官职概况</el-menu-item>
					<el-menu-item index="/academy">书院概况</el-menu-item>
					<el-menu-item index="/talk">论坛</el-menu-item>
					<el-menu-item index="/help">帮助</el-menu-item>
				</el-menu>
			</div>
		</div>
        <!-- 2. 湖南大学图片模块 -->
		<div>
			<img class="hnuDoor" src="@/assets/hnu_header.jpg" />
		</div>
		<!-- 3. router-view渲染路由模块 -->
		<div class="router"><router-view /></div>
	</div>
</template>
<script>
export default {
	name: 'MyMain',
	methods: {
		goHome() {
			this.$router.push('/home')
		},
		goProfile() {
			this.$router.push('/profile')
		},
		goTalk() {
			this.$router.push('/talk')
		}
	}
}
</script>

<style lang="less" scoped>

// 1. 顶部导航模块
.nav_top {
	height: 60px;
	width: 1230px;
	margin: 0 auto;
}

// 1-1.动图 
.hnuSlogan {
	float: left;
	height: 60px;
	width: 400px;
	margin-left: 50px;
}
.hnuSlogan img {
	height: 100%;
	width: 100%;
}

// 1-2.上部导航
.nav {
	float: right;
	height: 60px;
	width: 700px;
	margin-right: 30px;
}

.el-menu-demo {
	font-weight: bold;
}
//设置了行高和字体大小、高度颜色
.el-menu-item {
	// padding: 0, 10px !important;
	padding-left: 60px;
	font-size: 16px;
	color: #666666;
	transition: none !important;
}
//设置选中el-menu-item时的状态
.el-menu-item .is-active {
	border-bottom-color: none !important;
	color: black;
}
//设置选中el-menu-item时的样式
.el-menu-item:hover {
	color: #951d1d !important;
	// text-decoration: underline;
}

//去掉选中el-menu-item时的下划线
.el-menu--horizontal > .el-menu-item {
	border-bottom: none !important;
}
.el-menu--horizontal > .el-menu-item.is-active {
	border-bottom: none !important;
	color: #303133;
}
.hnuDoor {
	width: 100%;
	margin: 0 auto;
	// display: block;
}
.router {
	width: 1230px;
	margin: 0 auto;
}
</style>
